<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

    </script>
</head>
<body>
    <select  id="idol" onchange="getVal(this)">
        <option value="0">--请选择你的男神--</option>
        <option value="wangziwei">王子伟</option>
        <option value="xuweifeng">许伟峰</option>
        <option value="chenxinyu" >陈鑫宇</option>
        <option value="zhangdaye" selected>张大爷</option>
    </select>
    <input type="button" value="添加" id="btn">
    <input type="button" value="清空下拉列表" id="btn2">
    <input type="button" value="设置谁被选中" id="btn3">
    <script>
        // select的DOM对象.length    设置或返回下拉列表中选项的数量
        var idol=document.getElementById("idol");//DOM对象
        console.log("option的数量:"+idol.length);

        // select的DOM对象.options 获取select中的所有options的集合
        var options=idol.options;//获取select中的所有options的集合
        // console.log(options);
        for(var i=0;i<options.length;i++){
            // console.log(options[i]);//DOM对象
            console.log("获取option的value值："+options[i].value);
            console.log("获取option的文本值："+options[i].innerHTML);
            console.log("获取option的文本值----："+options[i].text);
        }

        // select的DOM对象.selectedIndex 设置或获取选中项的索引
        console.log("获取选中项的索引:"+idol.selectedIndex);
        console.log("获取选中项的value值:"+options[idol.selectedIndex].value);
        console.log("获取选中项的文本值:"+options[idol.selectedIndex].innerHTML);

        var btn=document.getElementById("btn");//DOM对象
        var btn2=document.getElementById("btn2");//DOM对象
        var btn3=document.getElementById("btn3");//DOM对象
        btn.onclick=function(){
            var idol=document.querySelector("select");//DOM对象
            // var option=document.createElement("option");//创建option元素
            // option.innerHTML="胡歌";
            // option.value="huge";
            // idol.appendChild(option);

            // new Option(文本值,value值)
            var option=new Option("霸道总裁","tangyi");
            
            // select的DOM对象.add(option,对应的位置);
            // idol.add(option,null);//默认追加至末尾
            idol.add(option,idol.options[1]);//添加至第二个（索引为1）选项
        };
        btn2.onclick=function(){
            // idol.length=0;//清空下拉列表
            idol.length=2;
        };
   
        btn3.onclick=function(){
            // idol.options[2].selected=true;
            idol.selectedIndex=2;//设置选中项的索引为2
        };

        function getVal(obj){
            // console.log(obj);//select的DOM对象

            var idol=document.getElementById("idol");
            //标准属性获取value值
            // console.log("获取选中项的value值:"+obj.options[obj.selectedIndex].value);
            // console.log("获取选中项的value值:"+idol.options[idol.selectedIndex].value);
            //非标准属性   selectDOM对象.value  获取选中项的value值
            console.log("获取选中项的value值："+idol.value);
            console.log("获取选中项的value值："+obj.value);


        }


        // option的DOM对象.value  获取value值
        // option的DOM对象.text   获取文本值
        

    </script>
</body>
</html>